<template>
	<view class="container">
		<view class="search-wrapper flex-x-bet-y-center">
			<uni-data-select :value="currentTypes" :localdata="filterTypes" :clear="false" class="filter-type" @change="filterTypeChange"></uni-data-select>
			<InputSearch :inputVal="keyword" :customStyle="{margin: '0'}" @searchConfirm="searchInputConfirm"></InputSearch>
		</view>
		
		<view class="history-wrapper" v-if="historyKeywords.length">
			<view class="history-title flex-x-bet-y-center">
				<text>历史搜索</text>
				<view class="" @tap="clearHistory">
					<u-icon name="trash-fill" color="#C6C6C6" size="40" ></u-icon>
				</view>
				
			</view>
			<view class="history-tags">
				<view class="history-tag" v-for="(item, index) in historyKeywords" :key="index" @tap="searchByHistoryTag(item)">{{item}}</view>
			</view>
		</view>
		
		<Modal ref="modal"></Modal>
	</view>
	
</template>

<script>
	import InputSearch from '@/components/InputSearch/index.vue'
	export default {
		components: {
			InputSearch
		},
		data() {
			return {
				filterTypes:[
					{text: '厂家货源', value: 1},
					{text: '二手货源', value: 2},
					{text: '租赁资源', value: 3},
					{text: '店铺', value: 4}
				],
				currentTypes: 1,
				keyword: '',
				historyKeywords: [],
			};
		},
		onLoad(){
			this.historyKeywords = uni.getStorageSync('historyTag') || []
		},
		methods:{
			searchByHistoryTag(item){
				this.keyword = item
				this.searchInputConfirm(this.keyword)
			},
			searchInputConfirm(value){
				if(this.historyKeywords.indexOf(value) === -1 && value.trim()){
					this.historyKeywords.unshift(value)
				}
				uni.setStorageSync('historyTag', this.historyKeywords)
				this.$myUni.navTo('/pages/product/list-product?from=indexSearch&putType=' + this.currentTypes +'&keyword=' + encodeURI(value), 'redirectTo', 'none')
			},
			filterTypeChange(e){
				this.currentTypes = e
			},
			clearHistory(){
				this.$refs.modal.open({
					content: '确定要清空历史记录？',
					success: () => {
						console.log('modal success')
						uni.removeStorageSync('historyTag')
						this.historyKeywords = []
					},
					cancel: () => {
						console.log('modal cancel')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #fff;
	}
	
	::v-deep .uni-select{
		border: 0 !important;
		padding: 0 !important;
	}
	
	::v-deep .uni-select__selector-item{
		justify-content: center;
	}
	
	.search-wrapper{
		margin: 30rpx;
		
		.filter-type{
			margin-right: 20rpx;
			width: 170rpx;
		}
	}
	
	.history-wrapper{
		padding: 30rpx;
		padding-top: 0;
		font-size: 29rpx;
		color: #333333;
		
		.history-tags{
			display: flex;
			flex-wrap: wrap;
			margin: 25rpx 0rpx;
			
			.history-tag{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 25rpx;
				height: 53rpx;
				background: #F7F7F7;
				border-radius: 27rpx;
				font-size: 25rpx;
				color: #333333;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			
		}
	}
</style>
